<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>首页</title>
  <script>
    const permissions = Number(localStorage.getItem('t'));
    if(!permissions) {
      window.location.href = './login.html';
    }
  </script>
  <style>
      *{
          margin: 0;
          padding: 0;
      }
      body {
          background: #e0e5ec;
      }
      h1 {
          position: relative;
          text-align: center;
          color: #353535;
          font-size: 50px;
          padding-top: 50px;
          font-family: "Cormorant Garamond", serif;
      }
      a {
          color: #fff;
          text-decoration: none;
      }
      p {
          font-family: 'Lato', sans-serif;
          font-weight: 300;
          text-align: center;
          font-size: 18px;
          color: #676767;
      }
      .frame {
          width: 90%;
          margin: 40px auto;
          text-align: center;
      }
      .custom-btn {
          width: 130px;
          height: 40px;
          color: #fff;
          border-radius: 5px;
          padding: 10px 25px;
          font-weight: 500;
          background: transparent;
          cursor: pointer;
          transition: all 0.3s ease;
          position: relative;
          display: block;
          margin: 20px auto;
          box-shadow:inset 2px 2px 2px 0 rgba(255,255,255,.5),
          7px 7px 20px 0 rgba(0,0,0,.1),
          4px 4px 5px 0 rgba(0,0,0,.1);
          outline: none;
      }
      /* 6 */
      .btn-6 {
          background: rgb(247,150,192);
          background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%);
          line-height: 42px;
          padding: 0;
          border: none;
      }
      .btn-6 a {
          position: relative;
          display: block;
          width: 100%;
          height: 100%;
      }
      .btn-6:before,
      .btn-6:after {
          position: absolute;
          content: "";
          height: 0%;
          width: 1px;
          box-shadow:
                  -1px -1px 20px 0 rgba(255,255,255,1),
                  -4px -4px 5px 0 rgba(255,255,255,1),
                  7px 7px 20px 0 rgba(0,0,0,.4),
                  4px 4px 5px 0 rgba(0,0,0,.3);
      }
      .btn-6:before {
          right: 0;
          top: 0;
          transition: all 500ms ease;
      }
      .btn-6:after {
          left: 0;
          bottom: 0;
          transition: all 500ms ease;
      }
      .btn-6:hover{
          background: transparent;
          color: #76aef1;
          box-shadow: none;
      }
      .btn-6:hover:before {
          transition: all 500ms ease;
          height: 100%;
      }
      .btn-6:hover:after {
          transition: all 500ms ease;
          height: 100%;
      }
      .btn-6 a:before,
      .btn-6 a:after {
          position: absolute;
          content: "";
          box-shadow:
                  -1px -1px 20px 0 rgba(255,255,255,1),
                  -4px -4px 5px 0 rgba(255,255,255,1),
                  7px 7px 20px 0 rgba(0,0,0,.4),
                  4px 4px 5px 0 rgba(0,0,0,.3);
      }
      .btn-6 a:before {
          left: 0;
          top: 0;
          width: 0%;
          height: .5px;
          transition: all 500ms ease;
      }
      .btn-6 a:after {
          right: 0;
          bottom: 0;
          width: 0%;
          height: .5px;
          transition: all 500ms ease;
      }
      .btn-6 a:hover:before {
          width: 100%;
      }
      .btn-6 a:hover:after {
          width: 100%;
      }

      /* 7 */
      .btn-7 {
          background: linear-gradient(0deg, rgba(255,151,0,1) 0%, rgba(251,75,2,1) 100%);
          line-height: 42px;
          padding: 0;
          border: none;
      }
      .btn-7 a {
          position: relative;
          display: block;
          width: 100%;
          height: 100%;
      }
      .btn-7:before,
      .btn-7:after {
          position: absolute;
          content: "";
          right: 0;
          bottom: 0;
          background: rgba(251,75,2,1);
          box-shadow:
                  -7px -7px 20px 0 rgba(255,255,255,.9),
                  -4px -4px 5px 0 rgba(255,255,255,.9),
                  7px 7px 20px 0 rgba(0,0,0,.2),
                  4px 4px 5px 0 rgba(0,0,0,.3);
          transition: all 0.3s ease;
      }
      .btn-7:before{
          height: 0%;
          width: 2px;
      }
      .btn-7:after {
          width: 0%;
          height: 2px;
      }
      .btn-7:hover{
          color: rgba(251,75,2,1);
          background: transparent;
      }
      .btn-7:hover:before {
          height: 100%;
      }
      .btn-7:hover:after {
          width: 100%;
      }
      .btn-7 a:before,
      .btn-7 a:after {
          position: absolute;
          content: "";
          left: 0;
          top: 0;
          background: rgba(251,75,2,1);
          box-shadow:
                  -7px -7px 20px 0 rgba(255,255,255,.9),
                  -4px -4px 5px 0 rgba(255,255,255,.9),
                  7px 7px 20px 0 rgba(0,0,0,.2),
                  4px 4px 5px 0 rgba(0,0,0,.3);
          transition: all 0.3s ease;
      }
      .btn-7 a:before {
          width: 2px;
          height: 0;
      }
      .btn-7 a:after {
          height: 2px;
          width: 0;
      }
      .btn-7 a:hover:before {
          height: 100%;
      }
      .btn-7 a:hover:after {
          width: 100%;
      }

      .exit {
          position: absolute;
          top: 50px;
          right: 0;
          padding: 2px 5px;
          cursor: pointer;
      }
  </style>
</head>
<body>
<h1>Hello.</h1>
<p>记录一点一滴</p>
<button class=" exit">退出</button>
<div class="frame">
  <button class="custom-btn btn-6"><a href="./lovelist/index.html?v=1.0">恋爱清单</a></button>
  <button class="custom-btn btn-7"><a href="./photo/index.html?v=1.0">宝贝图库</a></button>
  <p style="font-family: Andale Mono, monospace;">还有...</p>
</div>
<script>
  const exit = document.querySelector('.exit');
  exit.addEventListener('click', function () {
    window.localStorage.setItem('t', '0');
    location.href = '';
  })
</script>
</body>
</html>
